<template>
	<view class="concern-container">
		<u-navbar bgColor="#000000" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="center">
				<!-- 正文内容 -->
				<text style="font-size: 46rpx;font-weight: bold;">关注</text>
			</view>
		</u-navbar>
		<view class="concern-content">
			<view class="content-item" v-for="item in corashData" :key="item.id">
				<view class="item-left">
					<image :src="item.avatar?item.avatar:'../../static/imgs/user-avtar.png'" mode=""></image>
					<text>{{item.nickname}}</text>
				</view>
				<view class="item-right">
					<view class="right-btn">已关注</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {followCoarsh} from "@/api/my.js"
	export default {
		data() {
			return {
				corashData:[]
			};
		},
		methods:{
			// 获取我关注的教练信息
			getCorash(){
				followCoarsh().then(res=>{
					console.log(res)
					this.corashData=res.data
				})
			}
		},
		onShow() {
			this.getCorash()
		}
	}
</script>

<style lang="scss" scoped>
	.concern-container {
		height: 100%;
		background-color: #000000;
		padding: 0 35rpx;
		overflow-y: auto;

		.concern-content {
			border-top: 1px solid #4B4B4B;

			.content-item {
				margin: 40rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-left {
					display: flex;
					align-items: center;

					image {
						width: 91rpx;
						height: 91rpx;
						margin-right: 10rpx;
					}
				}

				.item-right {
					.right-btn {
						width: 95rpx;
						line-height: 40rpx;
						text-align: center;
						color: #000000;
						border-radius: 20rpx;
						background: #F4EA2A;
						height: 40rpx;
						font-size: 18rpx;
					}
				}

			}
		}
	}
</style>
